
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<!-- 引入props-types，用于对组件标签属性进行 -->
		<script type="text/javascript" src="../js/prop-types.js"></script>

	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>
		<div id="demo2"></div>
		<div id="hanshu"></div>

	<script type="text/babel">/* 此处必须写成babel */
		// 字符串形式的ref
		// class Demo extends React.Component{
		// 	render(){
		// 		return(
		// 			<div>
		// 				<input ref="inp_left" type="text" placeholder="点击按钮提示"/>
		// 				<button onClick = {this.show_data}>点击提示左侧数据</button>
		// 				<input ref="inp_right" onBlur = {this.show_data_right} type="text" placeholder="点击失去焦点提示数据"/>
		// 			</div>
		// 		) 
		// 	}
		// 	// 左侧输入框方法
		// 	show_data = () =>{
		// 		const {inp_left} = this.refs
		// 		alert(inp_left.value)
		// 	}
		// 	// 右侧输入框方法
		// 	show_data_right = () =>{
		// 		const {inp_right} = this.refs
		// 		alert(inp_right.value)
		// 	}
		// }
		// ReactDOM.render(<Demo />,document.getElementById("test"))

		// 回调形式的 ref
		class Demo2 extends React.Component{
			state = {ishot:true}
			render(){
				const{ishot} = this.state
				return(
					<div>
						<h2>今天天气{ishot?"好热":"凉块"}</h2>
						{/*内联的回调  还有class回调  就是把内部拿出来写在外部*/}
						<input ref={(c) =>{this.input_rab_l = c} } type="text" placeholder="点击按钮提示"/>
						<button onClick = {this.show_data_rab}>点击提示左侧数据</button>
						<input ref={this.ref_input} onBlur = {this.show_data_rab_right} type="text" placeholder="点击失去焦点提示数据"/>
					</div>
				) 
			}
			// 用class方法定义 ref回调 （render只执行一次 ，写法麻烦）
			ref_input = (c) =>{
				this.input_rab_r = c  
			}
			// 右侧输入框方法
			show_data_rab_right = () =>{
				const {input_rab_r} = this
				alert(input_rab_r.value)
			}
			// 左侧输入框方法
			show_data_rab = () =>{
				// console.log(this);
				const {input_rab_l,state} = this
				const {ishot,} = this.state
				alert(input_rab_l.value)
				this.setState({ishot:!ishot})
			}
		}
		ReactDOM.render(<Demo2 />,document.getElementById("demo"))

		// 回调形式的 createRef
		// class Demo3 extends React.Component{
		// 	state = {ishot:true}

		// 	myRef1 = React.createRef()
		// 	render(){
		// 		const{ishot} = this.state
		// 		return(
		// 			<div>
		// 				<h2>今天天气{ishot?"好热":"凉块"}</h2>
		// 				{/*内联的回调*/}
		// 				<input ref={this.myRef1} type="text" placeholder="点击按钮提示"/>
		// 				<button onClick = {this.show_data_rab}>点击提示左侧数据</button>
		// 				<input ref={(c) =>{this.input_rab_r = c}} onBlur = {this.show_data_rab_right} type="text" placeholder="点击失去焦点提示数据"/>
		// 			</div>
		// 		) 
		// 	}
		// 	// 左侧输入框方法
		// 	show_data_rab = () =>{
		// 		console.log(this);
		// 		const {myRef1,state} = this
		// 		// const {ishot,} = this.state
		// 		alert(myRef1.current.value)
		// 		// this.setState({ishot:!ishot})
		// 	}
		// 	// 右侧输入框方法
		// 	show_data_rab_right = () =>{
		// 		const {input_rab_r} = this
		// 		alert(input_rab_r.value)
		// 	}
		// }
		// ReactDOM.render(<Demo3 />,document.getElementById("demo2"))
	</script>
	</body>
	<style>
		.title{
			background-color: aqua;
		}
	</style>

	</html>
